1 00:00:00,490 --> 00:00:02,590 Thanks for joining me in this lecture. 2 00:00:02,590 --> 00:00:05,330 We're going to take a look at how to create a loading screen. 3 00:00:05,350 --> 00:00:08,740 Thankfully, making a loading screen is actually quite easy. 4 00:00:08,740 --> 00:00:13,420 And I've attached this guy to the lecture, so you'll want to go ahead and grab it so we can go ahead 5 00:00:13,420 --> 00:00:14,440 and move forward. 6 00:00:14,770 --> 00:00:20,080 Now, in order to create a loading screen, we're going to need a script, a local script to execute. 7 00:00:20,080 --> 00:00:22,090 As soon as the player joins the game. 8 00:00:22,180 --> 00:00:23,620 How can we do this? 9 00:00:23,740 --> 00:00:28,540 Well, this is where the replicated first service comes into play. 10 00:00:28,900 --> 00:00:34,210 This service is virtually the first service, hence it's called Replicated first. 11 00:00:34,210 --> 00:00:40,720 It's the first service to load when a player joins the game and any local scripts that are in replicated 12 00:00:40,720 --> 00:00:42,910 first will run immediately. 13 00:00:43,030 --> 00:00:45,850 That means we can use it for our loading screen. 14 00:00:46,180 --> 00:00:52,570 So I'm going to create a local script inside of Replicated first and we can take our loading guy and 15 00:00:52,570 --> 00:00:54,550 make it a child of the script. 16 00:00:54,760 --> 00:00:57,610 Now, inside of our script, we're going to need a few things. 17 00:00:57,610 --> 00:01:01,790 We're going to need some services, some variables. 18 00:01:02,750 --> 00:01:04,880 We will need one constant. 19 00:01:05,780 --> 00:01:10,070 And then we'll just need a main section to house all of our running code. 20 00:01:10,830 --> 00:01:13,020 Now, what are these services we're going to need? 21 00:01:13,050 --> 00:01:17,640 Well, one of the services we'll need is called the Content Provider Service. 22 00:01:20,400 --> 00:01:25,560 And this service allows us to preload any kind of assets into our game. 23 00:01:27,190 --> 00:01:29,740 The next service we'll need is the player service. 24 00:01:32,190 --> 00:01:34,590 And then we will need the tween service. 25 00:01:34,590 --> 00:01:37,100 That way we can tween our GUI. 26 00:01:41,520 --> 00:01:44,940 Because if we actually go back to our loading guy, my plan here. 27 00:01:45,710 --> 00:01:50,900 Is that while we're loading all these things in our game, I'm going to display the name of whatever 28 00:01:51,290 --> 00:01:57,530 thing in our game we are loading and I'm going to have this bar inside of our GUI. 29 00:01:58,400 --> 00:02:03,950 This bar will slowly increase the closer we get to loading all of the assets in our game. 30 00:02:04,910 --> 00:02:07,760 So let's go ahead and create a table. 31 00:02:07,760 --> 00:02:09,980 I'm going to call this table assets. 32 00:02:09,980 --> 00:02:13,790 And these are going to be every single asset that we need to load in our game. 33 00:02:13,790 --> 00:02:15,770 How do we get all the assets in our game? 34 00:02:15,770 --> 00:02:16,990 Well, it's quite simple. 35 00:02:17,000 --> 00:02:23,990 We just use the game keyword and then we just get every single descendant that is in our game just like 36 00:02:23,990 --> 00:02:24,470 that. 37 00:02:24,680 --> 00:02:30,470 We'll also need to create a reference to our guy, but we're going to be cloning our guy and we're going 38 00:02:30,470 --> 00:02:38,660 to be putting our guy inside of the player's player guy folder so we can clone the guy and just call 39 00:02:38,660 --> 00:02:41,060 it clone guy equal to script. 40 00:02:42,120 --> 00:02:46,860 And we reference the loading guy or the. 41 00:02:47,710 --> 00:02:49,570 When we actually put it down in there. 42 00:02:55,520 --> 00:02:57,860 It looks like I moved the wrong thing into the loading guy. 43 00:02:57,950 --> 00:02:58,760 My bad. 44 00:02:59,290 --> 00:03:02,330 So we're going to reference the loading guy. 45 00:03:03,750 --> 00:03:10,350 And we're going to clone it and the parent of our clone is going to be equal to players. 46 00:03:10,350 --> 00:03:14,520 We're going to get the local player and get their player GUI folder. 47 00:03:15,630 --> 00:03:20,570 The constant will need here is a constant for our loading screen. 48 00:03:20,580 --> 00:03:27,030 I'll just call it loading string and it's just going to say loading just like that. 49 00:03:27,690 --> 00:03:28,980 And now we can get started. 50 00:03:28,980 --> 00:03:33,870 So what we need to do is we need to loop through every single asset in our game and load it. 51 00:03:33,870 --> 00:03:43,770 So for every single asset in our game in the Ipairs table assets, what we'll do is we're going to use 52 00:03:43,770 --> 00:03:50,430 the content provider service and the service has a function called preload async and it says yields 53 00:03:50,430 --> 00:03:56,010 until all of the assets associated with the given instances or content strings have loaded. 54 00:03:56,010 --> 00:04:02,160 So we have to pass a table to this function and this table contains any assets we need to load into 55 00:04:02,160 --> 00:04:02,850 our game. 56 00:04:03,970 --> 00:04:08,410 And the asset we're just going to load here is the one that we're currently looping at. 57 00:04:08,410 --> 00:04:13,060 So we'll create this table, this new table here and just put our asset inside of it. 58 00:04:13,890 --> 00:04:18,870 Once we do this, we need to set the size of the loading bar that is in our GUI. 59 00:04:19,200 --> 00:04:25,710 And since we're going to be scaling it across the x axis, we need to calculate exactly what percentage 60 00:04:25,710 --> 00:04:28,410 along the x axis our loading bar needs to be at. 61 00:04:28,410 --> 00:04:29,460 And that's very easy. 62 00:04:29,460 --> 00:04:35,700 We can just create a variable called X scale and it can be equal to I write the current asset we're 63 00:04:35,700 --> 00:04:36,030 on. 64 00:04:36,030 --> 00:04:41,940 Let's say we're at number one divided by the total number of assets and that'll give us a fraction. 65 00:04:41,940 --> 00:04:46,500 So if we're one out of 60 assets, then you know, that's 1/60. 66 00:04:46,500 --> 00:04:53,340 So that bar will only represent, you know, 1/60 out of the total distance the bar will travel. 67 00:04:54,000 --> 00:05:00,510 So we can do clone GUI, get the frame that is in the GUI, this frame right here. 68 00:05:00,540 --> 00:05:03,930 And let me just open it up so you can see everything. 69 00:05:04,320 --> 00:05:08,400 And then we get the loading bar outline and then the loading bar. 70 00:05:08,400 --> 00:05:12,690 We need to set the size equal to a new udim to. 71 00:05:13,720 --> 00:05:15,250 It's going to have that X scale. 72 00:05:15,250 --> 00:05:18,070 We just calculated zero on the offset. 73 00:05:18,100 --> 00:05:21,090 The Y scale is going to be equal to. 74 00:05:21,100 --> 00:05:22,960 Let me actually just copy this. 75 00:05:23,720 --> 00:05:30,920 Put that in there and get the size along the y axis and scale and then zero for the Y offset. 76 00:05:32,220 --> 00:05:34,110 And then we need to set. 77 00:05:35,210 --> 00:05:42,800 I believe the asset name label dot text equal to the loading string and we'll concatenate it with the 78 00:05:42,800 --> 00:05:45,200 name of the asset that we're loading right now. 79 00:05:45,200 --> 00:05:47,300 So asset.name. 80 00:05:47,890 --> 00:05:52,450 Once we do this, I'm just going to yield for one frame. 81 00:05:52,660 --> 00:05:55,600 That way this doesn't go super fast. 82 00:05:56,340 --> 00:06:03,270 And then we can check if the current asset we're loading is equal to the total number of assets. 83 00:06:03,270 --> 00:06:11,340 So if we're at the last asset, then what I want to do is I want to wait for, let's say one second 84 00:06:11,340 --> 00:06:17,400 and then once that one second is up, then we can tween our GUI to fade away. 85 00:06:17,430 --> 00:06:18,750 How can we do that? 86 00:06:19,560 --> 00:06:25,080 Well, what we're going to do is we're going to loop through every single UI element that is inside 87 00:06:25,080 --> 00:06:26,100 of our GUI. 88 00:06:26,100 --> 00:06:29,190 So clone gui git descendants. 89 00:06:30,920 --> 00:06:35,480 What we're going to do is we're going to check if this element is a frame. 90 00:06:35,870 --> 00:06:41,020 If the element is a frame, then we need to set the transparency of the background to one. 91 00:06:41,030 --> 00:06:45,560 If it's a text label, we need to set the text transparency to one. 92 00:06:45,560 --> 00:06:50,120 So tween service, we're going to create a new tween on this element. 93 00:06:50,210 --> 00:07:01,520 We'll just do tween info.new 0.5 seconds and the background transparency for this frame will be equal 94 00:07:01,520 --> 00:07:04,310 to one, and then we can just play the tween. 95 00:07:05,960 --> 00:07:07,430 And then we'll copy this. 96 00:07:07,460 --> 00:07:10,730 And we need to do the same thing for a text label. 97 00:07:10,730 --> 00:07:14,300 So if this element is a text label. 98 00:07:16,910 --> 00:07:24,320 Then what we'll do is we'll set the text transparency to one instead of the background transparency, 99 00:07:24,320 --> 00:07:25,820 and we'll play it as well. 100 00:07:27,090 --> 00:07:30,660 Then, because calling this function doesn't yield. 101 00:07:30,660 --> 00:07:33,450 We're just going to wait for 0.5 seconds. 102 00:07:34,020 --> 00:07:41,130 And then once that's done, we can destroy this clone guy and then we can destroy this script as well. 103 00:07:41,160 --> 00:07:46,800 That way we clear up memory because we're storing every single descendant in our game in a table here, 104 00:07:46,800 --> 00:07:48,950 which will take up quite a bit of memory. 105 00:07:48,960 --> 00:07:53,580 So we're just going to destroy the script and destroy the guy so it's no longer on the screen. 106 00:07:53,670 --> 00:07:54,990 And guess what? 107 00:07:55,730 --> 00:07:56,630 That's it. 108 00:07:57,050 --> 00:07:59,850 That's all we need to do for our script. 109 00:07:59,870 --> 00:08:04,100 So if we go and test our game out, we should get a nice loading screen. 110 00:08:05,150 --> 00:08:06,050 So there we go. 111 00:08:06,380 --> 00:08:07,610 It's going. 112 00:08:07,760 --> 00:08:08,900 It's still going pretty fast. 113 00:08:08,900 --> 00:08:11,570 It's telling us all the things that it's loading in our game. 114 00:08:11,570 --> 00:08:16,970 And as you can see, our loading bar is slowly moving along as we're loading more and more things in 115 00:08:16,970 --> 00:08:23,690 our game, such as services and all of this stuff that's being displayed here and eventually it's done. 116 00:08:24,530 --> 00:08:27,790 The joy fades out and we're all good to go. 117 00:08:27,830 --> 00:08:30,560 Now, I did see that. 118 00:08:31,370 --> 00:08:33,740 This UI stroke. 119 00:08:33,790 --> 00:08:39,020 Ah, we should probably account for the UI stroke that is on the outline as well. 120 00:08:39,170 --> 00:08:44,660 So we could do else if element is a UI stroke. 121 00:08:46,960 --> 00:08:49,390 Then we can do the exact same thing. 122 00:08:50,480 --> 00:08:57,590 But instead we're just going to set the transparency because a stroke only has a transparency property. 123 00:08:58,270 --> 00:08:59,830 So if we try it again. 124 00:09:00,810 --> 00:09:02,910 Everything should fade out nicely. 125 00:09:08,510 --> 00:09:09,590 And there we are. 126 00:09:09,950 --> 00:09:11,010 That is it. 127 00:09:11,030 --> 00:09:14,330 It is that simple to create a loading in our game. 128 00:09:15,230 --> 00:09:21,380 Now, if you like this guy to appear on top of every single other guy in your game, then you can just 129 00:09:21,380 --> 00:09:24,620 set this display order number here to be something super high. 130 00:09:24,890 --> 00:09:30,860 The higher the number, the higher precedence it takes and will display over anything else on your screen. 131 00:09:30,860 --> 00:09:36,440 So set it to some super randomly high number and it will always display above everything else in your 132 00:09:36,440 --> 00:09:36,920 game. 133 00:09:37,780 --> 00:09:40,060 Other than that, I hope you enjoyed this lecture.